<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<style>
  #id1{
    color: red;
  }
  .c1{
    color: blue;
  }

  div > a:hover{
    color: red;
  }
</style>
<body>
<pre>
    简单选择器
      元素
      id
      class
    复合选择器(符号)
      ,并集选择器
      直连 交集选择器
      空格 派生选择器
      > 子选择器
      + 兄弟选择器
</pre>
<!--id的优先级比class高-->
<h1 id="id1" class="c1">headline</h1>
<div class="sidebar">div<a href="#">anchor</a></div>
</body>
</html>